<template>
  <div class="records-search-wrapper">
    <el-form
      ref="searchform"
      :inline="true"
      :model="searchFormData"
      @submit.native.prevent
    >
      <el-form-item
        v-for="item in searchOptions"
        v-if="item.type[2]? searchFormData[item.type[1]] == item.type[2] : true"
        :key="item.prop"
        :label="item.label"
        :prop="item.prop"
      >
        <template v-if="item.type[2]? (item.type[0] === 'input' && searchFormData[item.type[1]] == item.type[2]) : item.type[0] === 'input'">
          <el-input
            v-model="searchFormData[item.prop]"
            :style="{width: item.width || '100%'}"
            :placeholder="item.placeholder || '请输入'"
          />
        </template>
        <template v-if="item.type[2]? (item.type[0] === 'select' && searchFormData[item.type[1]] == item.type[2]) : item.type[0] === 'select'">
          <el-select
            v-model="searchFormData[item.prop]"
            :style="{width: item.width || '100%'}"
            :placeholder="item.placeholder || '请选择'"
          >
            <el-option
              v-for="option in item.data"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            />
          </el-select>
        </template>
        <template v-if="item.type[2]? (item.type[0] === 'date' && searchFormData[item.type[1]] == item.type[2]) : item.type[0] === 'date'">
          <el-date-picker
            v-model="searchFormData[item.prop]"
            :style="{width: item.width || '100%'}"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            :clearable="false"
          />
        </template>
        <template v-if="item.type[2]? (item.type[0] === 'monthrange' && searchFormData[item.type[1]] == item.type[2]) : item.type[0] === 'monthrange'">
          <el-date-picker
            v-model="searchFormData[item.prop]"
            :style="{width: item.width || '100%'}"
            type="monthrange"
            range-separator="至"
            start-placeholder="开始月份"
            end-placeholder="结束月份"
            value-format="yyyy-MM"
            :clearable="false"
          />
        </template>
        <template v-if="item.type[2]? (item.type[0] === 'money' && searchFormData[item.type[1]] == item.type[2]) : item.type[0] === 'money'">
          <el-input
            type="number"
            v-model="searchFormData[item.prop]"
            :style="{width: item.width || '100%'}"
            :placeholder="item.placeholder || '请输入'"
          />
          <el-input
            type="number"
            v-model="searchFormData[item.propTwo]"
            style="margin-left: 10px; width: 180px"
            :placeholder="item.placeholderTwo || '请输入'"
          />
        </template>
        <template v-if="item.type[2]? (item.type[0] === 'year' && searchFormData[item.type[1]] == item.type[2]) : item.type[0] === 'year'">
          <el-date-picker
            v-model="searchFormData[item.prop]"
            :style="{width: item.width || '100%'}"
            type="year"
            value-format="yyyy"
            :clearable="false"
          />
        </template>
      </el-form-item>
      <el-form-item>
        <el-button
          class="btn2"
          @click="clearAll"
        >重置</el-button>
        <el-button
          class="btn1"
          type="primary"
          @click="onSearch"
        >查询</el-button>
      </el-form-item>
      <slot />
    </el-form>
  </div>
</template>

<script>

export default {
  name: 'Search',
  props: {
    // 搜索数据
    searchData: {
      type: Object,
      default: () => {}
    },
    // 搜索配置项
    searchOptions: {
      type: Array,
      default: () => []
    },
    // 其他配置项
    options: {
      type: Object,
      default: () => {}
    },
    // 是否显示导出按钮
    isExport: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      searchFormData: this.searchData || {},
      optionsRegion: []
    }
  },
  mounted() {
    // console.log(this.regionArray)
  },
  methods: {
    onSearch() {
      this.$emit('onSearch', this.searchFormData)
    },
    clearAll() {
      this.$emit('clearAll', this.searchFormData)
    }
  }
}
</script>

<style scoped>
.records-search-wrapper {
  margin: 0 auto;
  background: #ffffff;
  width: 100%;
  min-height: 80px;
  padding: 20px 20px 0 20px;
  border-radius: 5px;
}
</style>
